<template>
	<view class="content">
		<top-userinfo :userusername="userusername" ref="topuserinfo" :parentData="false"></top-userinfo>
		<view class="uni-padding-wrap" style="padding-top: 30rpx;">
			<uni-forms>
				<uni-forms-item label="姓名">
					<uni-easyinput v-model="realname" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="手机号">
					<uni-easyinput type="number" v-model="phoneNumber" placeholder="请输入手机号" />
				</uni-forms-item>
				<uni-forms-item label="验证码">
					<uni-easyinput type="number" v-model="verificationCode" placeholder="请输入验证码" />
					<button class="mini-btn" size="mini" type="primary" @click="getVerificationCode" v-if="timer == 0">获取验证码</button>
					<button class="mini-btn" size="mini" type="primary" v-else>{{seconds}}</button>
				</uni-forms-item>
				
			</uni-forms>
		</view>
		
		<button type="primary"  @click="bindPhone" class="fixed-btn">绑定</button>
		<!-- ///////////////////// 旧版内容 勿删！！///////////////////// -->
		<!-- <view class="weui-cells">
			<view class="weui-cell">
			    <view class="weui-cell__hd"><label class="weui-label">姓名</label></view>
			    <view class="weui-cell__bd">
					<input class="" type="text" placeholder="请输入姓名" v-model="realname" />
				</view>
			</view>
			<view class="weui-cell">
			    <view class="weui-cell__hd"><label class="weui-label">手机号</label></view>
			    <view class="weui-cell__bd">
					<input class="" type="number" placeholder="请输入手机号" v-model="phoneNumber" />
				</view>
			</view>
			<view class="weui-cell weui-cell_active weui-cell_vcode weui-cell_wrap">
			    <view class="weui-cell__hd"><label class="weui-label">验证码</label></view>
			    <view class="weui-cell__bd weui-flex">
					<input class="" type="number" placeholder="请输入验证码" v-model="verificationCode" />
					<button class="weui-btn_reset weui-btn_icon weui-btn_input-clear">x</button>
			    </view>
				<view class="weui-cell__ft">
					 <button @click="getVerificationCode" class="weui-cell__control weui-btn_default weui-vcode-btn"
					  v-if="timer == 0">获取验证码</button>
					  <button class="weui-cell__control weui-btn_disabled weui-btn_primary weui-vcode-btn"
					   v-else>{{seconds}}</button>
				</view>
			</view>
			
		</view>
		<view class="button-sp-area">
			<button type="primary" @click="bindPhone">绑定</button>
		</view> -->
	</view>
	
</template>

<script>
	import {usersend_sms,userbind_mobile} from "@/api/apiinfo";
	import topuserinfo from './../../components/top_userinfo.vue';
	export default {
		components:{
			"top-userinfo":topuserinfo
		},
		data() {
		  return {
					realname:'',
					phoneNumber: '',
					timer: 0, // 计时器
					seconds: 60, // 验证码倒计时时间
					verificationCode:'',
					type:0,
					shopid:0,
					userusername:''
		  };
		},
		onLoad() {
			// let user_name = localStorage.getItem('username')
			// if(user_name == '' || user_name == null){
			// 	user_name = localStorage.getItem('nickname')
			// }
			// this.userusername = user_name;
			this.$nextTick(() => {
			    this.$refs.topuserinfo.getuserreload()
			});
			// this.userusername = localStorage.getItem('username');
			// this.shopid = localStorage.getItem('shopid');
				// this.shopid = 51;
			// 
			// localStorage.setItem('userToken', 'f1e89af7-2148-40f5-840b-ae9aad483fd1');//需要删除
			
			// this.type = this.$route.query.type
			// console.log('=='+this.type)
			// // console.log('用户名ID：'+this.shopid)
			// 	if(this.type == 2){
			// 		this.realname = localStorage.getItem('username');
			// 		// this.usernickname = localStorage.getItem('nickname');
			// 		// this.useravatar = localStorage.getItem('avatar');
			// 		this.phoneNumber = localStorage.getItem('mobile');
			// 	}
		},
	  methods: {
		  
		bindPhone(){
			
			if(this.realname == ''){
				uni.showToast({
				  title: '请填写姓名！',
				  icon: 'none',
				});
				return false
			}
			if(this.phoneNumber == ''){
				uni.showToast({
				  title: '请填写手机号码！',
				  icon: 'none',
				});
				return false
			}
			if(this.verificationCode == ''){
				uni.showToast({
				  title: '请填写验证码！',
				  icon: 'none',
				});
				return false
			}
			let datas = {
				// shop_id:this.shopid,
				realname:this.realname,
				mobile:this.phoneNumber,
				code:this.verificationCode
			}
			console.log(JSON.stringify(datas))
			userbind_mobile(datas).then((res) => {
				console.log("userbind_mobile接口返回数据：")
				console.log(JSON.stringify(res));
				if(res.code == 1000){
					uni.setStorageSync('mobile',this.phoneNumber);
					uni.switchTab({ //底部导航跳转方式
						url: '/pages/shop/shop'
					});
				}else{
					let messageinfo = res.message
					uni.showModal({
						title: '提示',
						content: messageinfo,
						showCancel: false,
						success: function (res) {
							if (res.confirm) {
								// uni.switchTab({ //内部页面跳转方式 
								// 	url: '/pages/shop/shop'
								// })
							} 
						}
					});
				}
				
			}).catch(err => {
				console.log(JSON.stringify(err))
				if(err.errMsg){
					uni.showModal({
						title: '提示',
						content: '绑定手机号报错：'+err.errMsg,
						showCancel: false,
						success: function (res) {
							if (res.confirm) {
								// uni.switchTab({ //内部页面跳转方式 
								// 	url: '/pages/shop/shop'
								// })
							} 
						}
					});
				}
				
			})
		},
	    // 获取验证码
	    getVerificationCode() {
			// this.isLoading = true;
			// // 模拟异步加载数据
			// setTimeout(() => {
			//   // 数据加载完毕后
			//   this.isLoading = false;
			// }, 3000); // 假设加载时间是3秒
			console.log('获取验证码')
	      // 在这里添加验证手机号是否合法的逻辑
			  if (!this.validatePhoneNumber(this.phoneNumber)) {
				uni.showToast({
				  title: '手机号码不正确！',
				  icon: 'none',
				});
				return;
			  }
			  let datas = {
				  mobile:this.phoneNumber,
				  // id:this.shopid
			  }
			usersend_sms(datas).then((res) => {
				console.log("usersend_sms接口返回数据：")
				console.log(JSON.stringify(res));
				if(res.code == 1000){
					uni.showToast({
					  title: '验证码已发送',
					  icon: 'success',
					});
					// 启动倒计时
					this.startCountdown();
				}
				
			}).catch(err => {
				console.log(JSON.stringify(err))
				if(err.errMsg){
					uni.showModal({
						title: '提示',
						content: '获取验证码报错：'+err.errMsg,
						showCancel: false,
						success: function (res) {
							if (res.confirm) {
								// uni.switchTab({ //内部页面跳转方式 
								// 	url: '/pages/shop/shop'
								// })
							} 
						}
					});
				}
				
			})
	    },
	   
	    // 验证手机号是否合法
	    validatePhoneNumber(phoneNumber) {
	      // 简单的手机号校验，实际应用中需要更复杂的正则表达式
	      return /^1[3-9]\d{9}$/.test(phoneNumber);
	    },
	    // 倒计时函数
	    startCountdown() {
	      if (this.timer) return;
	      this.timer = setInterval(() => {
	        if (this.seconds < 1) {
	          clearInterval(this.timer);
	          this.timer = 0;
	          this.seconds = 60;
	        } else {
	          this.seconds--;
	        }
	      }, 1000);
	    },
	  },
	};
</script>

<style lang="scss">
	.content{
		// padding: 30rpx;
		position: relative;
		// .bg-radius{
		// 	border-radius: 30rpx;
		// 	box-sizing: border-box;
		// 	box-shadow: 0 0 30rpx rgba(0, 0, 0, .1);
		// 	color: #101010;
		// 	background-color: #fff;
		// }
		.fixed-btn{
			position: fixed;
			bottom: 30rpx;
			right: 30rpx;
			left: 30rpx;
		}
		.mini-btn{
			position: absolute;
			top: 6rpx;
			right: 8rpx;
			z-index: 100;
		}
	}
	page{
		background-color: #f9f9f9;
	}
</style>